import React, { useState, useEffect } from 'react';
import { Form, Row, Col, DatePicker, Input, Button, Upload } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { isnullObj } from '../../Control/deepCopy';
import styles from './index.css';

import toString from '../../Control/toString';

const { TextArea } = Input;
const { RangePicker } = DatePicker;

const updataBoxText = () => {
  return (
    <div className={styles.updataBoxText}>
      <p>+</p>
      <p>添加图片</p>
    </div>
  );
};

function LuckyDrawForm(props) {
  // console.log(props);

  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  const changePicture = (index, a) => {
    if (a.file.status == 'done') {
      let newValue = props.form.getFieldValue('prizeVOS');
      newValue[index] = { ...newValue[index] };
      newValue[index].pictureKey = a.file.response.data.imgKey;
      newValue[index].pictureUrl = a.file.response.data.imgUrl;
      newValue[index].prizeLevel = index;
      props.form.setFieldsValue({
        prizeVOS: newValue,
      });
    }
  };
  const deletePicture = (index) => {
    let newValue = props.form.getFieldValue('prizeVOS');
    delete newValue[index].pictureKey;
    delete newValue[index].pictureUrl;
    props.form.setFieldsValue({
      prizeVOS: newValue,
    });
  };
  const LimitedQuantity = (index) => {
    let newValue = props.form.getFieldValue('prizeVOS');
    newValue[index] = { ...newValue[index] };
    if (newValue[index].pictureKey) {
      return true;
    } else {
      return false;
    }
  };
  // 奖品设置标题返回大写字
  const returnDescText = (index) => {
    switch (index) {
      case 0:
        return '未中奖';
      default:
        return toString.numToString(index) + '等奖';
    }
  };

  useEffect(() => {
    if (!isnullObj(props.formData)) {
      props.formData.prizeVOS = [...props.formData.prizeVOS];
      for (let i = 1; i < props.formData.prizeVOS.length; i++) {
        props.formData.prizeVOS[i].picture = [
          {
            uid: '-' + props.formData.prizeVOS[i].pictureKey,
            name: props.formData.prizeVOS[i].pictureKey,
            status: 'done',
            url: props.formData.prizeVOS[i].pictureUrl,
          },
        ];
      }
      props.form.setFieldsValue(props.formData);
    }
  }, []);

  return (
    <div className={styles.LuckyDrawForm}>
      <Form
        form={props.form}
        name="LuckyDrawForm"
        autoComplete="off"
        initialValues={{
          prizeVOS: [
            {
              prizeName: '谢谢参与',
              prizeTotal: '',
              chance: 0,
              prizeLevel: 0,
            },
            {
              pictureKey: '',
              prizeName: '',
              prizeTotal: '',
              chance: '',
              prizeLevel: '',
              pictureUrl: '',
            },
          ],
          LuckyDrawDate: props.activityDate,
        }}
        // onFinish={finishBasicData}
      >
        <div className={styles.firstDesc}>基本信息</div>

        <Row className={styles.FromRow}>
          <Col span={10}>
            <Form.Item
              name={`LuckyDrawDate`}
              label={`活动时间`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              rules={[
                {
                  required: true,
                  message: '请选择时间',
                },
              ]}
            >
              <RangePicker
                className={styles.RangePicker}
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
              />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item
              name={`luckyDrawNumber`}
              label={`每人抽奖次数`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              rules={[
                {
                  required: true,
                  pattern: new RegExp(/^[1-9]\d*$/, 'g'),
                  message: '请输入每人抽奖的次数',
                },
              ]}
            >
              <Input placeholder="请输入1~9999999的整数" />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item
              name={`rules`}
              label={`兑奖规则`}
              labelAlign={'left'}
              labelCol={{ span: 24, offset: 0 }}
              rules={[
                {
                  required: true,
                  message: '请输入兑奖规则',
                },
              ]}
            >
              <TextArea
                autoSize={{ minRows: 2, maxRows: 6 }}
                style={{ width: '386px' }}
                placeholder="请输入兑奖规则"
              />
            </Form.Item>
          </Col>
        </Row>

        <Form.List name="prizeVOS">
          {(fields, { add, remove }) => {
            return (
              <>
                {fields.map((field, index) => {
                  return (
                    <div key={field.key + 'Row'}>
                      <div className={styles.firstDesc}>
                        奖品设置({returnDescText(index)})
                      </div>
                      {index == 0 ? (
                        <Row
                          className={`${styles.activityPlanningLi} ${styles.FromRow}`}
                          key={field.key + 'Row'}
                        >
                          奖品总数: 无限制
                        </Row>
                      ) : (
                        <Row
                          className={`${styles.activityPlanningLi} ${styles.FromRow}`}
                          key={field.key + 'Row'}
                        >
                          <Col span={10}>
                            <Form.Item
                              {...field}
                              label={`奖品名称`}
                              key={field.key + 'prizeName'}
                              name={[field.name, 'prizeName']}
                              fieldKey={[field.fieldKey, 'prizeName']}
                              labelCol={{ span: 24, offset: 0 }}
                              rules={[
                                {
                                  required: true,
                                  message: '请输入奖品名称',
                                },
                              ]}
                              style={{ margin: '0 8px 0 0' }}
                            >
                              <Input
                                className={styles.StandardWidth}
                                placeholder="请输入奖品名称"
                              />
                            </Form.Item>
                          </Col>
                          <Col span={10}>
                            <Form.Item
                              {...field}
                              label={`奖品总数`}
                              key={field.key + 'prizeTotal'}
                              name={[field.name, 'prizeTotal']}
                              fieldKey={[field.fieldKey, 'prizeTotal']}
                              labelCol={{ span: 24, offset: 0 }}
                              rules={[
                                {
                                  required: true,
                                  message: '请输入奖品总数',
                                },
                              ]}
                              style={{ margin: '0 8px 0 0' }}
                            >
                              <Input
                                className={styles.StandardWidth}
                                placeholder="请输入奖品总数"
                              />
                            </Form.Item>
                          </Col>
                          <Col span={10}>
                            <Form.Item
                              {...field}
                              label={`中奖率(%)`}
                              key={field.key + 'chance'}
                              name={[field.name, 'chance']}
                              fieldKey={[field.fieldKey, 'chance']}
                              labelCol={{ span: 24, offset: 0 }}
                              rules={[
                                {
                                  required: true,
                                  message: '请输入中奖率',
                                },
                              ]}
                              style={{ margin: '0 8px 0 0' }}
                            >
                              <Input
                                className={styles.StandardWidth}
                                placeholder="请输入中奖率"
                              />
                            </Form.Item>
                          </Col>
                          <Col span={10}>
                            <Form.Item
                              name={[field.name, 'picture']}
                              key={field.key + 'picture'}
                              fieldKey={[field.fieldKey, 'picture']}
                              label={`图片`}
                              labelAlign={'left'}
                              labelCol={{ span: 24, offset: 0 }}
                              valuePropName="fileList"
                              getValueFromEvent={normFile}
                              style={{ margin: '0 8px 0 0' }}
                              rules={[
                                {
                                  required: true,
                                  message: '请传入图片',
                                },
                              ]}
                              extra={'支持扩展名：jpg. jpeg. png'}
                            >
                              <Upload
                                action={
                                  '/campus/campusweb/upload/pictureUpload'
                                }
                                accept={'image/*'}
                                listType="picture-card"
                                name={'multipartFile'}
                                onChange={(a) => changePicture(index, a)}
                                onRemove={() => deletePicture(index)}
                              >
                                {LimitedQuantity(index) ? '' : updataBoxText()}
                              </Upload>
                            </Form.Item>
                          </Col>
                          <DeleteOutlined
                            onClick={() => remove(field.name)}
                            className={styles.DeleteOutlined}
                            style={{ display: index > 1 ? 'block' : 'none' }}
                          />
                        </Row>
                      )}
                    </div>
                  );
                })}
                <Col span={24}>
                  <Form.Item>
                    <Button
                      className={styles.addBtn}
                      type="dashed"
                      onClick={() => add()}
                      block
                    >
                      + 添加
                    </Button>
                  </Form.Item>
                </Col>
              </>
            );
          }}
        </Form.List>
      </Form>
    </div>
  );
}
export default LuckyDrawForm;
